<template>
	<view class="bank">
		<view class="detail" v-if="status == 0">
			<view class="fram">
				<view class="list">
					<view class="label">
						账户姓名
					</view>
					<view class="right">
						<input type="text" placeholder="账户姓名" v-model="info.name" />
					</view>
				</view>
				
				<view class="list">
					<view class="label">
						银行
					</view>
					<view class="right">
						<picker mode="selector" :range="bankList" @change="onBank" range-key="name">
							<view class="flex_r_between">
								<input type="text" placeholder="请选择银行" v-model="info.bank" disabled />
								<uni-icons type="forward" :size="20" color="#BABABA"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="list">
					<view class="label">
						开户行
					</view>
					<view class="right">
						<input type="text" placeholder="账户姓名" v-model="info.bank_address" />
					</view>
				</view>
				
				<view class="list no_border">
					<view class="label">
						银行卡号
					</view>
					<view class="right">
						<input type="text" placeholder="请输入银行卡号" v-model="info.card_number" />
					</view>
				</view>
				
				<view class="list no_border">
					<view class="label">
						手机号
					</view>
					<view class="right">
						<input type="text" placeholder="手机号" v-model="info.mobile" />
					</view>
				</view>
				
			</view>
			<view class="btn" @click="submit">保存</view>
		</view>
		
		<view class="detail" v-else>
			<view class="card">
				<view class="title">
					<image class="logo" :src="$util.imgurl(`/imgs/business/bank_${bank_id}.jpg`)"></image>
					<text>{{info.bank}}</text>
				</view>
				<view class="card_no">
					<text>卡号</text>
					<view>{{info.card_number}}</view>
				</view>
				<view class="name">
					<text class="tit">姓名</text>
					<view class="block flex_r_between">
						<text>{{info.name}}</text>
						<view class="tag">
							<text style="margin-right: 0;" @click="onEdit">修改</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					name:'',
					bank:'',
					card_number:'',
					bank_address:'',
					mobile:'',
				},
				
				bank_id:0,
				
				status:0,
				
				bankList:[
					{
						name:'中国工商银行',
						id:1
					},
					{
						name:'中国农业银行',
						id:2
					},
					{
						name:'中国银行',
						id:3
					},
					{
						name:'中国建设银行',
						id:4
					},
					{
						name:'交通银行',
						id:5
					},
					{
						name:'中国邮政储蓄银行',
						id:6
					}
				]
			}
		},
		methods: {
			onBank(e){
				this.info.bank = this.bankList[e.detail.value].name
			},
			
			onEdit(){
				this.status = 0
			},
			
			getBank(){
				this.$post('/store.bank/read').then(res=>{
					if(Array.isArray(res.data)){
						this.status = 0
					}else {
						this.status = 1
						this.info = res.data
						this.bankList.forEach(item=>{
							if(item.name == res.data.bank){
								this.bank_id = item.id
							}
						})
					}
				})
			},
			
			submit(){
				if(!this.$util.luhnCheck(this.info.card_number)){
					return this.$util.msg('请输入正确的银行卡号')
				}
				if(!this.$util.phoneVerify(this.info.mobile)){
					return this.$util.msg('请输入正确的手机号号')
				}
				if(!this.info.name){
					return this.$util.msg('请输入姓名')
				}
				if(!this.info.bank_address){
					return this.$util.msg('请输入开户行')
				}
				this.$post('/store.bank/save',this.info).then(res=>{
					this.$util.msg(res.msg)
					this.getBank()
				})
			},
		},
		onLoad() {
			this.getBank()
		}
	}
</script>

<style scoped lang="less">
	.bank {
		padding: 30rpx;
	}
	.btn {
		height: 78rpx;
		background: #2E7EFA;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 78rpx;
		text-align: center;
		margin-top: 86rpx;
	}
	.fram {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
		.list {
			padding: 27rpx 0 30rpx;
			border-bottom: 1rpx solid #D7D7D7;
			display: flex;
			.label {
				width: 130rpx;
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
				margin-right: 30rpx;
			}
			.right {
				flex: 1;
				picker {
					position: relative;
					z-index: 10;
					width: 100%;
					input {
						flex: 1;
					}
				}
			}
		}
	}

	.card {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/business/wallet_bank_bg.png) 0 0 no-repeat;
		background-size: 100%;
		padding: 23rpx 30rpx 30rpx 24rpx;
		.title {
			display: flex;
			align-items: center;
			.logo {
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
			}
			text {
				margin-left: 18rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				line-height: 42rpx;
			}
		}
		.card_no {
			margin-top: 22rpx;
			text {
				font-size: 22rpx;
				color: rgba(8, 9, 10, .5);
				line-height: 30rpx;
			}
			view {
				font-size: 40rpx;
				font-weight: 600;
				color: #08090A;
				line-height: 84rpx;
				letter-spacing: 4rpx;
			}
		}
		.name {
			margin-top: 31rpx;
			.tit {
				font-size: 22rpx;
				color: rgba(8, 9, 10, .5);
				line-height: 30rpx;
			}
			.block {
				margin-top: 10rpx;
				.name {
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
				}
				.tag {
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
					text {
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						margin: 0 31rpx;
					}
					i {
						width: 1rpx;
						height: 26rpx;
						background: #CECECE;
					}
				}
			}
		}
	}
	
</style>
